<template>
	<view>
		<!-- 导航组件 -->
		<view :style="bgc" class="nav">
			<!-- 返回按钮 -->
			<view 
				:style="backButtonStyle" 
				@click="backToView"
				class="nav-btn back-btn">
				<image 
					:src="showNum === 0 ? backIconNormal : backIconActive" 
					class="back-icon"
					mode="widthFix"
					@error="handleImageError">
				</image>
			</view>

			<!-- 标题 -->
			<view 
				:style="titleViewStyle" 
				class="title-container">
				<label 
					:style="textDetailLabel" 
					class="title-text">{{ $t('czNav.bookDetail') }}</label>
			</view>

			<!-- 书架按钮 -->
			<view 
				:style="bookcaseButtonStyle" 
				@click="switchToView"
				class="nav-btn bookcase-btn">
				<!-- 模仿返回按钮的切换逻辑，使用showNum控制两种状态 -->
				<label 
					v-if="showNum === 0"
					class="bookcase-text bookcase-text-normal">
					{{ $t('czNav.bookcase') }}
				</label>
				<label 
					v-if="showNum === 1"
					class="bookcase-text bookcase-text-active">
					{{ $t('czNav.bookcase') }}
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				navbarHeight: 44,
				showNum: 0, // 0:默认状态 1:滑动后状态，与返回按钮保持一致
				tranLeveNum: 0,
				isStartOp: false,
				backIconNormal: '/static/home/backIcon.png',
				backIconActive: '/static/home/backIconBlock.png',
				fallbackIcon: '/static/home/defaultBackIcon.png'
			}
		},
		props: {
			title: {
				type: String,
				default: function() { return this.$t('czNav.defaultTitle'); }
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			offSet: {
				type: Number,
				default: 0
			},
			height: {
				type: [String, Number],
				default: 0
			},
			isCollection: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			offSet(num) {
				if (num < this.statusBarHeight && !this.isStartOp) {
					return
				}
				
				const scrollRange = 120 - this.statusBarHeight;
				this.tranLeveNum = Math.max(0, Math.min(1, num / scrollRange));
				
				// 状态切换阈值与返回按钮保持一致，避免单独闪烁
				if (num >= 55 && this.showNum !== 1) {
					this.isStartOp = true;
					// 延迟切换，与返回按钮动画同步
					this.$nextTick(() => {
						this.showNum = 1;
					});
				} else if (num < 55 && this.showNum !== 0) {
					// 延迟切换，确保动画流畅
					this.$nextTick(() => {
						this.showNum = 0;
					});
				}
			}
		},
		methods: {
			backToView() {
				uni.navigateBack();
			},
			switchToView() {
				uni.navigateTo({
					url: '/pages/mainTab/index?tabName=bookcase'
				});
			},
			handleImageError(e) {
				console.log('返回图标加载失败，使用备用图标', e)
				if (this.showNum === 0) {
					this.backIconNormal = this.fallbackIcon;
				} else {
					this.backIconActive = this.fallbackIcon;
				}
			},
			checkImageExists(url, callback) {
				uni.getImageInfo({
					src: url,
					success: () => callback(true),
					fail: () => callback(false)
				});
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
			
			this.checkImageExists(this.backIconNormal, (exists) => {
				if (!exists) this.backIconNormal = this.fallbackIcon;
			});
			this.checkImageExists(this.backIconActive, (exists) => {
				if (!exists) this.backIconActive = this.fallbackIcon;
			});
		},
		computed: {
			bgc() {
				return {
					height: `${this.height + this.statusBarHeight}rpx`,
					backgroundColor: `rgba(255,255,255,${this.tranLeveNum})`
				};
			},
			backButtonStyle() {
				return {
					backgroundColor: `rgba(0, 0, 0, ${1 - this.tranLeveNum})`,
					transition: 'background-color 0.3s ease-in-out'
				};
			},
			bookcaseButtonStyle() {
				const baseColor = this.isCollection 
					? '255, 106, 106'  
					: '0, 0, 0';      
					
				return {
					backgroundColor: `rgba(${baseColor}, ${1 - this.tranLeveNum})`,
					// 与返回按钮保持相同的过渡效果
					transition: 'background-color 0.3s ease-in-out'
				};
			},
			titleViewStyle() {
				return {
					opacity: this.tranLeveNum,
					transition: 'opacity 0.3s ease-in-out'
				};
			},
			textDetailLabel() {
				return {
					opacity: this.tranLeveNum,
					color: `rgba(0, 0, 0, ${this.tranLeveNum})`,
					transition: 'all 0.3s ease-in-out'
				};
			}
		}
	}
</script>

<style>
	.nav {
		padding-top: var(--status-bar-height);
		width: 750rpx;
		z-index: 99;
		position: fixed;
		display: flex;
		align-items: center;
	}
	
	.nav-btn {
		min-width: 32px;
		height: 32px;
		border-radius: 16px;
		display: flex;
		align-items: center;
	}
	
	.back-btn {
		margin-left: 10px;
	}
	
	.bookcase-btn {
		margin-right: 10px;
		justify-content: center;
		min-width: 60px; /* 确保有足够的宽度容纳不同语言的文字 */
		width: auto; /* 宽度自适应内容 */
	}
	
	.bookcase-text {
		font-size: 13px;
		/* 关键：添加相同的过渡动画参数，与返回按钮保持一致 */
		transition: all 0.3s ease-in-out;
		white-space: nowrap; /* 防止文字换行 */
		padding: 0 20px; /* 添加内边距，确保文字有足够的空间 */
	}
	
	.title-container {
		width: calc(100% - 84px);
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.title-text {
		font-size: 15px;
		font-weight: bold;
	}
	
	.back-icon {
		margin-left: 7px;
		height: 15px;
		width: 15px;
		transition: opacity 0.3s ease-in-out; /* 与文字保持相同过渡 */
	}
	
	.bookcase-text {
		font-size: 13px;
		/* 关键：添加相同的过渡动画参数，与返回按钮保持一致 */
		transition: all 0.3s ease-in-out;
	}
	
	/* 默认状态文字（与返回按钮默认图标状态匹配） */
	.bookcase-text-normal {
		color: #ffffff;
	}
	
	/* 滑动后状态文字（与返回按钮激活图标状态匹配） */
	.bookcase-text-active {
		color: #000000;
	}
</style>
